<script setup>
import { fetchNowData, fetchAirData } from '@/api/weatherAPI'
import { ref, computed, watch, onMounted } from 'vue'
import { useCityStore } from '../stores/cityStore'
import 'qweather-icons/font/qweather-icons.css'

const cityStore = useCityStore()
const nowData = ref({})
const updateTime = ref('')
const airData = ref({})

const weatherTypes = ref([
  {
    id: 1,
    icon: 'qi-sunny',
    title: '晴天',
    desc: '适合外出活动'
  },
  {
    id: 2,
    icon: 'qi-cloudy',
    title: '多云',
    desc: '温和舒适'
  },
  {
    id: 3,
    icon: 'qi-light-rain',
    title: '小雨',
    desc: '记得带伞'
  },
  {
    id: 4,
    icon: 'qi-heavy-rain',
    title: '大雨',
    desc: '注意防雨'
  },
  {
    id: 5,
    icon: 'qi-thunderstorm', 
    title: '雷雨',
    desc: '注意防雷'
  },
  {
    id: 6,
    icon: 'qi-snow',
    title: '降雪',
    desc: '注意保暖'
  },
  {
    id: 7,
    icon: 'qi-wind',
    title: '大风',
    desc: '注意防风'
  },
  {
    id: 8,
    icon: 'qi-haze',
    title: '雾霾',
    desc: '注意防护'
  }
])

// 监听
watch(() => cityStore.location.id, (newLocationId) => {
  if (newLocationId) {
    getData(newLocationId)
  }
})

onMounted(() => {
  if (cityStore.location.id) {
    getData(cityStore.location.id)
  }
})

async function getData(locationID) {
  const response = await fetchNowData(locationID)
  console.log(response);
  nowData.value =response.now
  updateTime.value =response.updateTime

  const resAir = await fetchAirData(locationID)
  airData.value = resAir.now
}

const airText = computed(() => {
  const aqi = airData.value.aqi
  if (aqi <= 50) {
    return '优'
  } else if (aqi <= 100) {
    return '良'
  } else if (aqi <= 150) {
    return '轻度污染'
  } else if (aqi <= 200) {
    return '中度污染'
  } else if (aqi <= 300) {
    return '重度污染'
  } else {
    return '严重污染'
  }
})
</script>
<template>
  <div class="now">
    <ul class="weather-list">    
      <li class="header">
        <div class="city">{{ cityStore.location.name }}</div>
        <div ><li class="update-time">更新时间：{{ updateTime }}</li></div>
        </li>
        <div class="air">
  <p>AQI {{ airText }}</p>
</div>
      <li class="main-info">
       
        <div class="temp-group">
          <i :class="`qi-${nowData.icon}`"></i>
          <div class="temp">
            <span class="temp-num">{{ nowData.temp }}</span>
            <span class="temp-unit">°</span>
          </div>
        </div>
        <div class="weather-text">{{ nowData.text }}</div>
         
      </li>

      <li class="weather-detail">
        <div class="detail-row">
          <span class="label">{{ nowData.windDir }}</span>
          <span class="value">{{ nowData.windSpeed }}km/h</span>
        </div>
        <div class="detail-row">
          <span class="label">相对湿度</span>
          <span class="value">{{ nowData.humidity }}%</span>
        </div>
        <div class="detail-row">
          <span class="label">体感温度</span>
          <span class="value">{{ nowData.feelsLike }}°C</span>
        </div>
      </li>
    </ul>

    <div class="weather-types">
      <div v-for="type in weatherTypes" 
           :key="type.id" 
           class="weather-card">
        <i :class="type.icon"></i>
        <h3>{{ type.title }}</h3>
        <p>{{ type.desc }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.now {
  background: linear-gradient(to bottom, #e6eef6 0%, #f5f7fa 100%);
  border-radius: 16px;
  padding: 16px; 
  color: #2c405a;
  max-width: 100%; 
  margin: 0 auto; /* 居中 */
}

.city {
  font-size: 18px; 
}

.temp-num {
  font-size: 48px; 
}

.weather-detail {
  padding: 12px; 
}

.detail-row {
  padding: 6px 0;
  font-size: 12px; 
}

.weather-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.city {
  font-size: 22px;
  font-weight: 500;
}

.aqi {
 float: right;
  background-color: #b4cd7c;
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 14px;
}

.main-info {
  margin: 30px 0;
  text-align: center; 
}

.temp-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.temp-group i {
  font-size: 64px; 
  color: #2c405a;
}

.temp {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.temp-num {
  font-size: 64px;  
  font-weight: 500;
  line-height: 1;
}

.temp-unit {
  font-size: 32px;  
  margin-top: 8px;
}

.weather-text {
  margin-top: 8px;
  font-size: 16px;
  color: #536b88;
  text-align: center;  
}

.weather-detail {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(83, 107, 136, 0.1);
}

.detail-row:last-child {
  border-bottom: none;
}

.label {
  color: #536b88;
}

.value {
  color: #2c405a;
  font-weight: 500;
}

.update-time {
  text-align: right;
  font-size: 12px;
  color: #536b88;
  margin-top: 16px;
}

.air {
  padding: 1rem;
  overflow: hidden;
}

.air > p {
  text-align: center;
  width: 6rem;
  height: 2rem;
  line-height: 2rem;
  background-color: #a9a538;
  border-radius: 1rem;
  color: white;
  float: right;
}


.weather-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: repeat(2, auto); 
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  overflow-x: hidden; /* 移除水平滚动 */
}

.weather-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  min-width: 0; /* 防止内容溢出 */
}

.weather-card i {
  font-size: 28px; 
  color: #2c405a;
  margin-bottom: 8px;
}

.weather-card h3 {
  margin: 4px 0;
  font-size: 14px;
  color: #2c405a;
  text-align: center;
}

.weather-card p {
  margin: 0;
  font-size: 12px;
  color: #536b88;
  text-align: center;
}

.search-input {
  width: 120px; 
  height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(83, 107, 136, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: #2c405a;
  font-size: 14px;
  margin-left: 16px; 
}

.search-input::placeholder {
  color: #536b88;
}

.search-input:focus {
  outline: none;
  border-color: #3273dc;
  box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.1);
}
</style>